<template>
  <div class="login_container">
    <div class="login_containerCtl">
      <div class="login_head">
        <span class="login_head_text">机场统一通信平台</span>
        <div class="shoutDownCtl" @click="shoutDown">
          <img src="@/assets/images/account/shoutDown.png" alt="">
        </div>
      </div>
      <div class="login_box">
        <!--logo区域-->
        <div class="login_box_logo">
          <img class="login_box_logoBox" src="@/assets/images/account/loginLogo.png" alt="">
        </div>
        <!-- 登录表单区域 -->
        <div class="login_box_loginFormCtl">
          <el-form ref="loginFormRef" :model="user" :rules="loginFormRules" label-width="0px" class="login_form">
            <!-- 用户名 -->
            <el-form-item prop="username">
              <div class="usernameIcon">
                <img src="@/assets/images/account/usernameIcon.png" alt="">
              </div>
              <input class="usernameBox" placeholder="请输入账号" v-model="user.account"
                     prefix-icon="iconfont icon-user"></input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <div class="usernameIcon">
                <img src="@/assets/images/account/pwdIcon.png" alt="">
              </div>
              <input class="usernameBox" v-model="user.pwd" placeholder="请输入密码" prefix-icon="iconfont icon-3702mima"
                     type="password"></input>
            </el-form-item>
            <el-checkbox v-if="false" class="rememberPassword" v-model="rememberPassword">记住密码</el-checkbox>
            <el-checkbox  v-if="false" class="autoLogin" v-model="autoLogin">自动登录</el-checkbox>

          </el-form>

        </div>
        <!-- 错误提示区域 -->
        <div CLASS="loginErrorBox_Ctl">
          <span class="loginErrorBox">{{errorMessage}}</span>
        </div>
        <!-- 按钮区域 -->
        <div CLASS="loginBtnBox_Ctl">
          <div class="loginBtnBox" @click="Initialize">
            <div class="loginBtn" >登录</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import { DispatchCtrlLib } from '../../chromeLib/DispatchCtrlLib.js'
  import { Callbackfuc } from '../../chromeLib/Callbackfuc.js'
  import { ErrorMessage } from '../../js/ErrorMessage'
  import FleetIdController from '@/api/FleetIdController'
  export default {
    name: 'login',
    data () {
      return {
        // 这是登录表单的数据绑定对象
        user: {
          // /*llc  888888   192.168.0.201*/
          ip: '192.168.0.209',           //登录服务器的ip
          // ip: '42.101.38.101',           //101
          // ip: '192.168.0.201',           //登录服务器的ip
          // ip: '42.101.38.179',           //登录服务器的ip
          account: '',                //调度台账号
          pwd: '',                    //调度台密码
          initAction: '初始化',       //初始化按钮
          initStatus: '未初始化',      //初始化状态
          loginAction: '登录',       //登录按钮
          loginStatus: '未登录',      //登录状态
        },

        rememberPassword: true,
        autoLogin: true,
        errorMessage: "",
        // 这是表单的验证规则对象
        loginFormRules: {
          // 验证用户名是否合法
          username: [
            {
              required: true,
              message: '请输入登录名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 10,
              message: '长度在 3 到 10 个字符',
              trigger: 'blur'
            }
          ],
          // 验证密码是否合法
          password: [
            {
              required: true,
              message: '请输入登录密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 15,
              message: '长度在 6 到 15 个字符',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    created () {

    },
    mounted () {
      window.login = this.login
      window.loginrspdeal = this.loginrspdeal
      // 绑定enter事件
      this.enterKeyup();
      // this.user.ip =  window.location.hostname;//192.168.0.6
      console.log("登录ip:"+this.user.ip);
    },
    destroyed() {
      // 销毁enter事件
      // this.enterKeyupDestroyed();
    },
    methods: {
      //关闭
      shoutDown () {

      },
      // 点击重置按钮，重置登录表单
      resetLoginForm () {
        // console.log(this);
        // this.$refs.loginFormRef.resetFields()
      },
      /*enterKey(event) {
        const componentName = this.$options.name;
        if (componentName == "login") {
          const code = event.keyCode
            ? event.keyCode
            : event.which
              ? event.which
              : event.charCode;
          if (code == 13) {
            this.Initialize();
          }
        }
      },*/
     /* enterKeyupDestroyed() {
        document.removeEventListener("keyup", this.enterKey);
      },
      enterKeyup() {
        document.addEventListener("keyup", this.enterKey);
      },*/
      //
      /**
       * 初始化
       */
      Initialize () {
        // DispatchCtrlLib.Initialize(Callbackfuc.DispatchCallBack);
        DispatchCtrlLib.Initialize(Callbackfuc.WebDispatchCallback);
      },
      /**
       * 登录
       */
      login () {
        let Server = this.user.ip + ''
        let Name = this.user.account + ''
        let Password = this.user.pwd + ''
        let retCode = DispatchCtrlLib.Login(Name, Password, Server)
        console.log(retCode)
      },
      /**
       * 登录回调处理
       */
      loginrspdeal (result, parm) {
        switch (result) {
          case 0:
            console.log('登录成功返回数据')
            console.log(parm)
            this.errorMessage="";
            DispatchCtrlLib.LoginHold()
            // this.$router.push('/home')
            this.$router.replace({
              path: '/home',
              query: {
                ip: this.user.ip + '',
                userId: this.user.account + '',
                isBs:1,
                LocalIP:parm.LoginInfo.LocalIP,
              }
            })
            break;
          case 1:
            this.errorMessage=ErrorMessage.InitResourceFailed;  //资源初始化失败
            break;
          case 2:
            this.errorMessage=ErrorMessage.UserOrPwdError;//用户名密码错误
            break;
          case 3:
            this.errorMessage=ErrorMessage.LicenseOutOfTime;//许可证过期
            break;
          case 4:
            this.errorMessage=ErrorMessage.LoginFailed;//登陆失败
            break;
          case 5:
            this.errorMessage=ErrorMessage.LoginTimeout;//超时，服务器无响应
            break;
          case 6:
           /* this.$router.replace({
              path: '/home',
              query: {
                ip: this.user.ip + '',
                userId: this.user.account + '',
                isBs:1,
                // LocalIP:parm.LoginInfo.LocalIP,
                LocalIP:"192.168.0.17",
              }
            })*/
            this.errorMessage=ErrorMessage.AlreadyLogin;//已登录，请勿重复登录
            break;
        }
      }
    }
  }

</script>

<style lang="scss" scoped>
  .login_container {
    height: 100%;
    position: relative;
    background: url("../../assets/images/account/loginBgc.png")  center center;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
  }

  .agentRightBoxOUT {

  }
  .login_containerCtl {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .login_head {
    height: 66px;
    width: 880px;
    background-color: #424A95;
    position: relative;
  }

  .login_head_text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-size: 26px;
    font-weight: bold;
  }

  .shoutDownCtl {
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .login_box {
    width: 880px;
    height: 460px;
    /*background-color: #fff;*/
    border-radius: 3px;
    /*    position: absolute;
        left: 50%;
        top: 50%;
        transform: translateY(-50%);*/
    position: relative;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    /*background-color: #c1a43a;*/
    background: url("../../assets/images/account/loginBgc.png")  center center;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /*position: absolute; !* 不可缺少 *!*/

    /*center center no-repeat*/
  }

  .login_box_logo {
    width: 334px;
    height: 180px;
    position: absolute;
    left: 53px;
    top: 112px;
  }

  .login_box_logoBox {
    width: 334px;
    height: 180px;
  }

  .login_box_loginFormCtl {
    position: absolute;
    left: 468px;
    top: 141px;

  }

  .usernameBox {
    width: 364px;
    height: 59px;
    border-radius: 10px;
    outline: none;
    text-indent: 69px;
    border: 1px solid #D4D4D4;
    font-size: 24px;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #999999;
  }

  .usernameIcon {
    position: absolute;
    left: 22px;
    top: 15px;
  }

  .rememberPassword {
    position: absolute;
    left: 5%;
    bottom: -10px;
  }

  .autoLogin {
    position: absolute;
    right: 5%;
    bottom: -10px;
  }

  .loginBtnBox_Ctl {
    position: absolute;
    left: 53.5%;
    top: 70%;
  }
  .loginErrorBox_Ctl{
    position: absolute;
    left: 60%;
    bottom: 33%;
    color: red;
  }

  .loginBtnBox {
    position: relative;
    width: 364px;
    height: 59px;
    display: block;
    background-color: #B3D8FF;
    border-radius: 10px;
    cursor: pointer;
    color: #409EFF;
  }
  .loginBtnBox:hover{
    background-color: #409EFF;
    color: #ffffff;

  }

  .loginBtn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
  }
</style>
